<template>
	<view>
		<view class="content">
			<view class="content_key">
				<view class="content_fl">
					<text class="text1">名字</text>
				</view>
				<view class="content_fr"><input type="text" v-model="trueName" placeholder="请输入名字"/></view>
			</view>
			<view class="content_key">
				<view class="content_fl">
					<text class="text1">手机号</text>
				</view>
				<view class="content_fr"><input type="text" v-model="mobile" placeholder="请输入手机号" /></view>
			</view>
			<view class="content_key">
				<view class="content_fl">
					<text class="text1">身份证号</text>
				</view>
				<view class="content_fr"><input type="number" v-model="identityNumber" placeholder="请输入身份证号" /></view>
			</view>
			<view class="content_key">
				<view class="content_fl">
					<text class="text1">车牌号</text>
				</view>
				<view class="content_fr"><input type="text" v-model="carNumber" placeholder="请输入车牌号" /></view>
			</view>
			<view class="success_key" @click="motorcycle()">
				<view class="success_fl">车长车型</view>
				<view class="success_fr">
					<text v-if="demandLength==''">请填写车型信息</text>
					<text v-else>{{demandLength}} / {{demandStyle}} / {{demandLoad}}T</text>
					<image src="../../static/iocn11.png"></image>
				</view>
			</view>
		</view>
		<view class="footer" @click="AddDriver()">确认</view>
	</view>
</template>

<script>
	import {
		AddDriver
	} from '@/public/Api/update.js'
	import {
		setValue,
		getValue
	} from '@/public/storeage/index.js'
	export default {
		data() {
			return {
				demandLength:'',
				demandStyle:'',
				demandLoad:'',
				identityNumber:'',
				mobile:'',
				trueName:"",
				carNumber:''
			}
		},
		onLoad() {
		
		},
		onShow() {
			uni.$on('cars',(data)=>{
				this.demandLength=data.demandLength
				this.demandStyle=data.demandStyle
				this.demandLoad=data.demandLoad
			})
		},
		methods: {
			motorcycle(){
				uni.navigateTo({
					url: '/pages/PersonalCenter/fleetMotorcycle'
				})
			},
			async AddDriver() {
				var identityNumber=this.identityNumber
				var mobile=this.mobile
				var trueName=this.trueName
				var carNumber=this.carNumber
				var parentId=getValue('id')
			    var load=this.demandLoad
				var length=this.demandLength
				var style=this.demandStyle
				if (trueName == '') {
						uni.showToast({
							title: "姓名不能为空",
							icon: 'none',
							duration: 2000
						})
						return false
					}
					if (mobile == '') {
						uni.showToast({
							title: "手机号不能为空",
							icon: 'none',
							duration: 2000
						})
						return false
					}
					if (identityNumber == '') {
						uni.showToast({
							title: "身份证不能为空",
							icon: 'none',
							duration: 2000
						})
						return false
					}
					if (load == ''|| length=='' || style=='') {
						uni.showToast({
							title: "车长车型不能为空",
							icon: 'none',
							duration: 2000
						})
						return false
					}
				try {
					const {
						data: res
					} = await AddDriver({
						parentId,
						trueName,
						mobile,
						carNumber,
						identityNumber,
						load,
						length,
						style
					})
					if(res.result.success==true){
						uni.showToast({
							title: `${res.result.message}`,
							icon: 'none',
						})
						setTimeout(function() {
							uni.reLaunch({
								url: '/pages/PersonalCenter/fleet'
							})
						}, 600)
					}
					
				} catch (e) {}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
		padding: 15upx;
	}
	
	.content {
		width: 100%;
		border-radius: 17upx;
		background: #FFFFFF;
		box-shadow: 1.75upx 1.75upx 7.01upx 0px #bababa;
		background-color: #fff;
		padding: 0 20upx;

		.content_key {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 105upx;
			border-bottom: 1upx solid #e5e5e5;

			.content_fl {
				display: flex;
				align-items: center;

				text {
				
					font-size: 31upx;
					font-weight: bold;
					color: #000;
				}
                 
				.text {
					color: #EF4D3D;
					margin-right: 10upx;
				}
				.text1{
				width: 200upx;		
				}
			}

			.content_fr {
				display: flex;
				align-items: center;

				image {
					width: 32upx;
					height: 32upx;
				}

				text {
					display: block;
					text-align: left;
					font-size: 28upx;
					width: 270upx;
				}

				input {
					font-size: 28upx;
					text-align: left;
				}
			}
		}
	}
	.success_key{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 100upx;
		.success_fl{
			font-size: 31upx;
			font-weight: bold;
			color: #000;
		}
		.success_fr{
			display: flex;
			align-items: center;
			width: 360upx;
			padding-left: 60upx;
			text{
				font-size: 24upx;
				color: #808080;
			}
			image{
				width: 32upx;
				height: 32upx;
				margin-left: 30upx;
			}
			
		}
	}
	.footer{
		width: 436upx;
		height: 71upx;
		opacity: 1;
		border-radius: 17upx;
		background: #F04D3E;
		font-size: 38upx;
		color: #fff;
		text-align: center;
		line-height: 71upx;
		margin: 0 auto;
		margin-top: 80upx;
	}
</style>
